<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: black;
        }
        .container{
            height:300px;
            width: 300px;
            margin:50px;
        }
        .person{
            position: absolute;
            left:150px;
            top:160px;
            animation: run 3s linear  infinite;
        }
        .head{
            position: absolute;
            width: 30px;
            height: 30px;
            border: 7px solid white;
            border-radius: 100%;
            top:-30px;
            left:-60px;
            animation: toudong 2s infinite alternate;
        }
        .body{
            position: absolute;
            width: 0px;
            height: 60px;
            border: 5px solid white;
            top:10px;
            left:-50px;
            
        }
        .zuobi{
            position:absolute;
            width:30px;
            height: 35px;
            border-left: 5px solid white;
            border-bottom: 5px solid white;
            transform: rotate(58deg);
            transform-origin: 0 0;                          /* 设置旋转中心点为手臂起点（肩膀位置） */
            left:-50px;
            top:17px;
            animation: zuogebodong 0.5s ease-in-out infinite; /* 前后摆动动画 */
        }
        .youbi{
            position:absolute;
            width:30px;
            height: 35px;
            border-left: 5px solid white;
            border-bottom: 5px solid white;
            transform: rotate(290deg);
            transform-origin: 0 0;                          /* 设置旋转中心点为手臂起点（肩膀位置） */
            left:-45px;
            top:17px;
            animation: yougebodong 0.5s ease-in-out infinite; /* 前后摆动动画，与左臂相反 */

        }
        .zuojiao{
            position:absolute;
            width:38px;
            height: 30px;
            border-left: 5px solid white;
            border-bottom: 5px solid white;
            transform: rotate(-70deg);
            left:-87px;
            top:38px;
            transform-origin:100% 100%;                          /* 设置旋转中心点为腿部起点（臀部位置） */
            animation: zuojiaodong 0.5s ease-in-out infinite;  /* 前后摆动动画 */
        }
        .youjiao{
            position:absolute;
            width:30px;
            height: 38px;
            border-left: 5px solid white;
            border-bottom: 5px solid white;
            transform: rotate(-180deg);
            left: -79px;
            top:32px;
            transform-origin: 100% 100%;                          /* 设置旋转中心点为腿部起点（臀部位置） */
            animation: youjiaodong 0.5s ease-in-out infinite; /* 前后摆动动画，与右腿交替 */
                                 /* 延迟0.5秒，使左腿与右腿交替摆动 */
        }
        /*头动*/
        @keyframes toudong {
            0%{
                transform: rotate3d(0,0,1,5deg);
            }
            25%{
                transform: rotate3d(0,0,1,-30deg) skew(15deg,0deg);
            }
            50%{
                transform: rotate3d(0,0,1,5deg) ;
            }
            75%{
                transform: rotate3d(0,0,1,-30deg) skew(15deg,0deg);
            }
            100%{
                transform: rotate3d(0,0,1,20deg) skew(-15deg,0deg);
            }
        }
        /*左胳膊前后摆动*/
        @keyframes zuogebodong{
            0%{
                transform: rotate(30deg);                    /* 向后摆 */
            }
            50%{
                transform: rotate(0deg);                    /* 向前摆 */
            }
            100%{
                transform: rotate(30deg);                    /* 回到向后摆 */
            }
        }
        /*右胳膊前后摆动（与左臂相反）*/
        @keyframes yougebodong{
            0%{
                transform: rotate(310deg);                   /* 向后摆（与左臂相反） */
            }
            50%{
                transform: rotate(360deg);                   /* 向前摆（与左臂相反） */
            }
            100%{
                transform: rotate(310deg);                   /* 回到向后摆 */
            }
        }
        @keyframes zuojiaodong {
            0%{
                transform: rotate(-70deg);
            }
            50%{
                transform: rotate(-120deg);
            }
            100%{
                transform: rotate(-70deg);
            }
        }
        @keyframes youjiaodong {
            0%{
                transform: rotate(-180deg);
            }
            50%{
                transform: rotate(-100deg);
            }
            100%{
                transform: rotate(-180deg);
            }
            
        }
        @keyframes run {
            0%{
                transform: translateX(0px);
            }
            100%{
                transform: translateX(1200px);
            }
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="person">
            <div class="head"></div>
            <div class="zuobi"></div>
            <div class="youbi"></div>
            <div class="body"></div>
            <div class="zuojiao"></div>
            <div class="youjiao"></div>
        </div>
    </div>
</body>
</html>